<template>
	<view>
		<navBar></navBar>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, key) in ad['6']" :key="key">
				<view class="swiper-item banner" @tap="go(item.target)">
					<image :src="item.thumb" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="cateContainer">
			<scroll-view class="scrollView" scroll-with-animation scroll-x>
				<view v-for="(item, index) in category" :key="index" :class="category_selected == item.value ? 'cateItem cateActive' : 'cateItem'"
				 @tap="selectCategory(item.value)">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view class="select-pannel">
			<view class="block" @tap="showSelect(1)">
				<text>区域</text>
				<image src="../../../static/down.png" mode="widthFix"></image>
			</view>
			<view class="block" @tap="showSelect(2)">
				<text>价格</text>
				<image src="../../../static/down.png" mode="widthFix"></image>
			</view>
			<view class="block" @tap="showSelect(3)">
				<text>户型</text>
				<image src="../../../static/down.png" mode="widthFix"></image>
			</view>
			<view class="block" @tap="showSelect(4)">
				<text>更多</text>
				<image src="../../../static/down.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="main">
			<block v-for="(item,index) in list" :key="index">
				<house-pannel :goods="item" :type="type"></house-pannel>
			</block>
		</view>
		<view class="select-pannel-modal" v-if="show_select_pannel" @tap="hideSelect">
			<view class="select-pannel" @tap.stop="stop">
				<view class="block" @tap="showSelect(1)">
					<text>区域</text>
					<image :src="`../../../static/${select_type == 1 ? 'up' : 'down'}.png`" mode="widthFix"></image>
				</view>
				<view class="block" @tap="showSelect(2)">
					<text>价格</text>
					<image :src="`../../../static/${select_type == 2 ? 'up' : 'down'}.png`" mode="widthFix"></image>
				</view>
				<view class="block" @tap="showSelect(3)">
					<text>户型</text>
					<image :src="`../../../static/${select_type == 3 ? 'up' : 'down'}.png`" mode="widthFix"></image>
				</view>
				<view class="block" @tap="showSelect(4)">
					<text>更多</text>
					<image :src="`../../../static/${select_type == 4 ? 'up' : 'down'}.png`" mode="widthFix"></image>
				</view>
			</view>
			<view class="select_main" @tap.stop="stop">
				<view class="content">
					<block v-if="select_type == 1">
						<view class="left">
							<scroll-view class="scroll" scroll-y>
								<!-- <view :class="list_type == 1 ? 'list active' : 'list'" @tap="list_tap(1)">附近</view> -->
								<view :class="list_type == 2 ? 'list active' : 'list'" @tap="list_tap(2)">区域</view>
								<view :class="list_type == 3 ? 'list active' : 'list'" @tap="list_tap(3)">地铁</view>
							</scroll-view>
						</view>
						<view class="right">
							<block v-if="list_type == 1">
								<scroll-view class="scroll" scroll-y>
									<view class="list" v-for="(item, index) in area" :key="index" :data-pid="item.pid" :data-id="item.id">{{ item.name }}</view>
								</scroll-view>
							</block>
							<block v-if="list_type == 2">
								<scroll-view class="scroll" scroll-y>
									<view :class="area_selected == index ? 'list active' : 'list'" v-for="(item, index) in area" :key="index" @tap="selectArea(index)">
										{{ item.name }}
									</view>
								</scroll-view>
							</block>
							<block v-if="list_type == 3">
								<scroll-view class="scroll two" scroll-y>
									<view :class="metro_selcted[0] == index ? 'list active' : 'list'" v-for="(item, index) in metro" :key="index"
									 @tap="selectMetro(index, 0)">
										{{ item.line_name }}
									</view>
								</scroll-view>
								<scroll-view class="scroll two" scroll-y>
									<view :class="metro_selcted[1] == index ? 'list active' : 'list'" v-for="(item, index) in metro[metro_selcted[0]]['list']"
									 :key="index" @tap="selectMetro(metro_selcted[0], index)">
										{{ item.station_name }}
									</view>
								</scroll-view>
							</block>
						</view>
					</block>
					<block v-if="select_type == 2">
						<view class="left">
							<scroll-view class="scroll" scroll-y>
								<view class="list">价格</view>
							</scroll-view>
						</view>
						<view class="right">
							<scroll-view class="scroll" scroll-y>
								<view :class="price_selected == index ? 'list active' : 'list'" v-for="(item, index) in price" :key="index"
								 @tap="selectPrice(index)">
									{{ item.name }}
								</view>
							</scroll-view>
						</view>
					</block>
					<view class="huxing" v-if="select_type == 3">
						<view class="list" v-for="(item, index) in room" :key="index">
							<text>{{ item.name }}</text>
							<checkbox :checked="room_selected == item.data" @tap="selectRoom(item.data)"></checkbox>
						</view>
					</view>
					<view class="more" v-if="select_type == 4">
						<scroll-view class="scroll" scroll-y>
							<view class="pannel">
								<view class="title">面积(m²)</view>
								<view class="main">
									<view :class="room_size == '0_50'?'span active':'span'" @click="changeRoomSize('0_50')">50m²以下</view>
									<view :class="room_size == '50_70'?'span active':'span'" @click="changeRoomSize('50_70')">50-70m²</view>
									<view :class="room_size == '70_90'?'span active':'span'" @click="changeRoomSize('70_90')">70-90m²</view>
									<view :class="room_size == '90_110'?'span active':'span'" @click="changeRoomSize('90_110')">90-110m²</view>
									<view :class="room_size == '110_130'?'span active':'span'" @click="changeRoomSize('110_130')">110-130m²以下</view>
									<view :class="room_size == '130_150'?'span active':'span'" @click="changeRoomSize('130_150')">130-150m²</view>
									<view :class="room_size == '150_200'?'span active':'span'" @click="changeRoomSize('150_200')">150-200m²</view>
									<view :class="room_size == '200_-1'?'span active':'span'" @click="changeRoomSize('200_-1')">200m²以上</view>
								</view>
							</view>
							<view class="pannel">
								<view class="title">类型</view>
								<view class="main">
									<view :class="category_num == 1?'span active':'span'" @click="changeCategory(1)">住宅</view>
									<view :class="category_num == 2?'span active':'span'" @click="changeCategory(2)">别墅</view>
									<view :class="category_num == 3?'span active':'span'" @click="changeCategory(3)">商业</view>
									<view :class="category_num == 4?'span active':'span'" @click="changeCategory(4)">写字楼</view>
									<view :class="category_num == 5?'span active':'span'" @click="changeCategory(5)">底商</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="btns" v-if="select_type != 2">
					<view class="chongzhi" @tap="reset()">重置</view>
					<view class="queren" @tap="confirm()">确认</view>
				</view>
				<view class="input_price" v-if="select_type == 2">
					<text>自定义</text>
					<input type="text" placeholder="最低价" />
					<text>—</text>
					<input type="text" placeholder="最高价" />
					<text>元</text>
					<view class="queren">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/house-nav-bar/house-nav-bar.vue';
	import housePannel from '@/components/house-pannel/house-pannel.vue';
	export default {
		components: {
			navBar,
			housePannel
		},
		data() {
			return {
				type: 1,
				category_num:null,
				ad: [],
				list: [],
				show_select_pannel: false,
				page: 1,
				page_size: 15,
				select_type: 1,
				list_type: 2, //1附近，2区域，3地铁
				cateId: 1,
				city: '深圳',
				area: [],
				metro: [],
				category: [],
				category_selected: '',
				metro_selcted: [0, 0],
				area_selected: 0,
				price_selected: 0,
				room_selected: null,
				room_size: null,
				room: [{
						name: '一室',
						data: '1'
					},
					{
						name: '两室',
						data: '2'
					},
					{
						name: '三室',
						data: '3'
					},
					{
						name: '四室',
						data: '4'
					},
					{
						name: '五室以上',
						data: '5'
					}
				],
				price: [{
						name: '不限',
						data: null
					},
					{
						name: '2万以下',
						data: '0_20000'
					},
					{
						name: '2-3万',
						data: '20000_30000'
					},
					{
						name: '3-5万',
						data: '30000_50000'
					},
					{
						name: '5-8万',
						data: '50000_80000'
					},
					{
						name: '8-10万',
						data: '80000_100000'
					},
					{
						name: '10万以上',
						data: '100000_-1'
					}
				]
			};
		},
		onLoad(option) {
			this.type = option.type || 1;
			this.category_selected = option.category_selected || null;
			this.getCity();
			this.getMetro();
			this.getData();
		},
		methods: {
			changeCategory(value){
				this.category_num = value;
			},
			changeRoomSize(value) {
				this.room_size = value;
			},
			hideSelect() {
				this.show_select_pannel = false;
			},
			showSelect(cate = 1) {
				this.select_type = cate;
				this.show_select_pannel = true;
			},
			getCity() {
				this.$request
					.post('/landed/getSearch', {
						data: {
							city: this.city,
							search_type: 1 //1：城市，2：地铁站
						}
					})
					.then(res => {
						this.area = res.data.data.list;
					});
			},
			getMetro() {
				this.$request
					.post('/landed/getSearch', {
						data: {
							city: this.city,
							search_type: 2 //1：城市，2：地铁站
						}
					})
					.then(res => {
						this.metro = res.data.data.list;
					});
			},
			list_tap(list_type = 1) {
				this.list_type = list_type;
			},
			stop() {
				return false;
			},
			selectMetro(index_one = 0, index_two = 0) {
				this.metro_selcted = [index_one, index_two];
			},
			selectArea(index = 0) {
				this.area_selected = index;
			},
			selectPrice(index = 0) {
				this.price_selected = index;
			},
			reset() {
				this.metro_selcted = [0, 0];
				this.area_selected = 0;
				this.price_selected = 0;
				this.room_selected = null;
				this.room_size = null;
				this.category_num = null;
			},
			confirm() {
				this.show_select_pannel = false;
				let params = {};
				if(this.category_selected){
					params.category = this.category_selected;
				}
				if(this.room_selected){
					params.room = this.room_selected;
				}
				if(this.category_num){
					params.cate = this.category_num;
				}
				if(this.room_size){
					params.room_size = this.room_size;
				}
				if (this.list_type == 2) {
					params.area = this.area[this.area_selected]['name'];
				} else if (this.list_type == 3) {
					let index1 = this.metro_selcted[0];
					let index2 = this.metro_selcted[1];
					let data = this.metro[index1]['list'][index2];
					params.metro = `${this.metro[index1]['city_id']}/${this.metro[index1]['line_id']}/${data['station_id']}`;
				}

				this.getData(params);
			},
			selectRoom(index) {
				// let room_selected = this.room_selected;
				this.room_selected = index;
				// if (room_selected.indexOf(index) == -1) {
				// 	room_selected.push(index);
				// 	this.room_selected = room_selected;
				// } else {
				// 	let new_arr = [];
				// 	for (let key in room_selected) {
				// 		if (room_selected[key] != index) {
				// 			new_arr.push(room_selected[key]);
				// 		}
				// 	}
				// 	this.room_selected = new_arr;
				// }
			},
			selectCategory(value) {
				this.category_selected = value;
				this.page = 1;
				this.reset();
				this.getData({
					category: value
				});
			},
			getData(params = {}) {
				let data = params;
				data.city = this.city;
				data.page = this.page;
				data.page_size = this.page_size;
				data.type = this.type;
				this.$request
					.post('/landed/getMainIndex', {
						data
					})
					.then(res => {
						this.ad = res.data.data.list.ad;
						this.category = res.data.data.list.category;
						let list = this.page == 1 ? [] : this.list;
						list.push(...res.data.data.list.list);
						this.list = list;
					});
			}
		},
		onReachBottom() {
			this.page++;
			this.getData();
		}
	};
</script>

<style lang="scss">
	.banner {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.select-pannel {
		width: 100%;
		height: 70upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 2upx solid #efefef;
		background-color: #fff;

		.block {
			width: 25%;
			height: 100%;
			line-height: 70upx;
			font-size: $uni-font-size-base;
			color: $uni-text-color;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 20upx;
				margin-left: 10upx;
			}
		}
	}

	.cateContainer {
		height: 80upx;
		box-sizing: border-box;
		padding: 0 20upx;
		font-size: $uni-font-size-base;

		.scrollView {
			width: 100%;
			height: 100%;
			line-height: 80upx;
			white-space: nowrap;

			.cateItem {
				display: inline-block;
				margin-right: 42upx;
				color: #333;
				font-size: $uni-font-size-lg;

				&:last-child {
					margin: 0;
				}

				&.cateActive {
					color: #F33632;
				}
			}
		}
	}

	.main {
		padding: 30upx;
		box-sizing: border-box;
		background-color: #F5F6F7;
	}

	.select-pannel-modal {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 1000;
		top: 0upx;
		left: 0upx;
		background-color: $uni-bg-color-mask;
		padding-top: var(--status-bar-height);

		.select_main {
			width: 100%;
			background-color: #ffffff;
			height: 1200upx;

			.content {
				width: 100%;
				height: 1050upx;
				border-bottom: 2upx solid #efefef;
				box-sizing: border-box;
				position: relative;

				.huxing {
					width: 100%;
					height: 100%;

					.list {
						color: $uni-text-color;
						width: 100%;
						height: 100upx;
						text-align: left;
						box-sizing: border-box;
						padding: 0 30upx;
						line-height: 100upx;
						font-size: $uni-font-size-base;
						border-bottom: 2upx solid #efefef;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}

				.left {
					width: 40%;
					height: 1050upx;
					position: absolute;
					top: 0;
					left: 0upx;
					background-color: #fff;

					.scroll {
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						border-right: 2upx solid #efefef;

						.list {
							color: $uni-text-color;
							width: 100%;
							height: 100upx;
							text-align: left;
							box-sizing: border-box;
							padding: 0 30upx;
							line-height: 100upx;
							font-size: $uni-font-size-base;
							border-bottom: 2upx solid #efefef;

							&.active {
								color: #007aff;
							}
						}
					}
				}

				.right {
					width: 60%;
					height: 1050upx;
					position: absolute;
					top: 0;
					right: 0upx;
					background-color: #fafafa;

					.scroll {
						width: 100%;
						height: 100%;
						box-sizing: border-box;

						&.two {
							width: 50%;
							display: inline-block;

							&:first-of-type {
								background-color: #fff;
								border-right: 2upx solid #efefef;
							}
						}

						.list {
							color: $uni-text-color;
							width: 100%;
							height: 100upx;
							text-align: left;
							box-sizing: border-box;
							padding: 0 30upx;
							line-height: 100upx;
							font-size: $uni-font-size-base;
							border-bottom: 2upx solid #efefef;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;

							&.active {
								color: #007aff;
							}
						}
					}
				}

				.more {
					width: 100%;
					height: 100%;

					.scroll {
						width: 100%;
						height: 100%;

						.pannel {
							width: 100%;
							box-sizing: border-box;
							padding: 30upx;
							padding-bottom: 0upx;

							.title {
								width: 100%;
								height: 50upx;
								line-height: 50upx;
								font-size: $uni-font-size-lg;
								color: $uni-text-color;
							}

							.main {
								width: 100%;
								padding-top: 30upx;
								display: flex;
								justify-content: flex-start;
								flex-wrap: wrap;

								.span {
									display: inline-block;
									height: 50upx;
									line-height: 50upx;
									font-size: $uni-font-size-base;
									background-color: #efefef;
									color: #999999;
									padding: 0 15upx;
									margin-left: 15upx;
									margin-bottom: 15upx;

									&.active {
										background-color: #F36D32;
										color: #fff;
									}
								}
							}
						}
					}
				}
			}

			.btns {
				width: 100%;
				height: 150upx;
				box-sizing: border-box;
				padding: 0 50upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.chongzhi,
				.queren {
					width: 270upx;
					height: 80upx;
					box-sizing: border-box;
					line-height: 80upx;
					text-align: center;
					font-size: $uni-font-size-base;
				}

				.chongzhi {
					color: #3f536e;
					background-color: $uni-bg-color-grey;
				}

				.queren {
					color: #fff;
					background-color: #4cd964;
				}
			}

			.input_price {
				font-size: $uni-font-size-base;
				width: 100%;
				height: 150upx;
				box-sizing: border-box;
				padding: 0 50upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				input {
					width: 80upx;
					height: 60upx;
					padding: 0 20upx;
					border-radius: 10upx;
					font-size: $uni-font-size-base;
					background-color: #efefef;
				}

				.queren {
					width: 130upx;
					height: 70upx;
					margin-left: 20upx;
					box-sizing: border-box;
					line-height: 70upx;
					text-align: center;
					font-size: $uni-font-size-base;
					color: #fff;
					background-color: #4cd964;
				}
			}
		}
	}
</style>
